<template>
  <!-- @change="onChange" @search="onChange" -->
   <a-cascader :options="optionsList_" v-model="newValue" :changeOnSelect="false" v-bind="itemAttr" @change="onChange" />
</template>

<script>
export default {
  name:'Cascader',
  props:{
    itemAttr:{type:Object},
    value:{type:Array},
    optionsList:{type:Array},
  },
  data(){
    return {
      optionsList_:[],
      newValue:[]
    }
  },
  watch:{
    value: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Array]' && val.length>0){
          this.newValue = val
          // console.log('Cascader watch  value == >',val);
          // this.onChange(val)
          // console.log('Cascader watch  value == >',val);
        }
      },
      deep: true,
      immediate: true
    },
    optionsList: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Array]'){
          // console.log('optionsList====>',val);
          this.optionsList_ = val
          // val.forEach(item=>{
          //   this.optionsList_.push(item)
          // })
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    onChange(value){
      console.log('Cascader   onChange == >',value);
      this.$emit('change.value',value )
      this.$emit('change', value);
      this.$emit('input', value);
    }
  }
}
</script>

<style>

</style>
